<template>
  <div class="home-cases">
    <h2 class="section-title">成功案例</h2>
    <el-row :gutter="20">
      <el-col :span="8" v-for="(item, index) in casesList" :key="index">
        <el-card class="case-card" shadow="hover">
          <div class="case-info">
            <h3 class="case-title">{{ item.title }}</h3>
            <p class="case-desc">{{ item.description }}</p>
            <div class="case-tags">
              <el-tag size="small" type="info">{{ item.industry }}</el-tag>
              <el-tag size="small" type="success">{{ item.solution }}</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="view-more">
      <router-link to="/cases" class="more-link">
        <span>查看更多案例</span>
        <el-icon><ArrowRight /></el-icon>
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getFeaturedCases } from '@/api/home'
import { ArrowRight } from '@element-plus/icons-vue'

const casesList = ref([])

const fetchFeaturedCases = async () => {
  try {
    const res = await getFeaturedCases()
    casesList.value = res.data || []
  } catch (error) {
    console.error('获取精选案例失败:', error)
  }
}

onMounted(() => {
  fetchFeaturedCases()
})
</script>

<style lang="scss" scoped>
.home-cases {
  padding: 40px 0;

  .section-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    color: #303133;
  }

  .case-card {
    height: 200px;
    margin-bottom: 20px;
    
    .case-info {
      padding: 15px;
      
      .case-title {
        font-size: 18px;
        margin-bottom: 10px;
        color: #303133;
      }
      
      .case-desc {
        font-size: 14px;
        color: #606266;
        margin-bottom: 15px;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      
      .case-tags {
        .el-tag {
          margin-right: 8px;
        }
      }
    }
  }

  .view-more {
    text-align: center;
    margin-top: 30px;
    
    .more-link {
      display: inline-flex;
      align-items: center;
      color: #409EFF;
      text-decoration: none;
      font-size: 16px;
      
      span {
        margin-right: 5px;
      }
      
      &:hover {
        opacity: 0.8;
      }
    }
  }
}
</style> 